<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
    <link rel="stylesheet" href="./css/index2.css">
    <link rel="stylesheet" href="./css/com.css">
    <style type="text/css">
        body {
            background: #000;
        }
        </style>

    <script>
        //ready
            $(()=>{

            //函数封装减少hover移入的代码重复
            function createHover(content,str,ele){ 
            if(content.innerHTML===str){
                $(".child.childH").removeClass("childH");
                $(ele).addClass("childH");
                $(".clear>li>b").removeClass("bAdd");
                $(content).next().addClass("bAdd");
            }    
            }

            //函数封装减少hover移出的代码重复
            function createHoverOut(ele){
                    $(".child").hover(
                    ()=>{
                        $(this).addClass("childH");
                    },
                    ()=>{
                        $(ele).removeClass("childH");
                        $(".clear>li>b").removeClass("bAdd");
                    }
                );  
            }


            $(".clear>li").hover((e)=>{
                var html=e.target;
               if(html.innerHTML==="首页"){
                   //清除所有效果
                $(".child").removeClass("childH");
                //清除下三角
                $(".clear>li>b").removeClass("bAdd");
               }
                createHover(html,"导览",".c2");
                createHover(html,"展览",".c3");
                createHover(html,"教育",".c4");
                createHover(html,"探索",".c5");
                createHover(html,"学术",".c6");
                createHover(html,"文创",".c7");
                createHover(html,"关于",".c8");
            },
            (e)=>{
                var html=e.target;
                if(html==="首页"){

                }
                createHoverOut(".c2");
                createHoverOut(".c3");
                createHoverOut(".c4");
                createHoverOut(".c5");
                createHoverOut(".c6");
                createHoverOut(".c7");
                createHoverOut(".c8");   
            })

            $(".header").mouseleave(function(){
                $(".child").removeClass("childH");
                $(".clear>li>b").removeClass("bAdd");
            })
        })
    
    </script>
</head>
<body>
    <div class="header">
        <div class="nav">
            <ul class="clear">
                <li>
                    <a href="/Home.html">首页</a>
                    <b><img src="./img/trigon.png" width="18"></b>
                </li>
                <li >
                    <a href="/Visit.html">导览</a>
                    <b><img src="./img/trigon.png" width="18"></b>
                </li>
                <li>
                    <a href="/shows.html">展览</a>
                    <b><img src="./img/trigon.png" width="18"></b>
                </li>
                <li>
                    <a href="/Events.html">教育</a>
                    <b><img src="./img/trigon.png" width="18"></b>
                </li>
                <li>
                    <a href="/Explore.html">探索</a>
                    <b><img src="./img/trigon.png" width="18"></b>
                </li>
                <li>
                    <a href="/Research.html">学术</a>
                    <b><img src="./img/trigon.png" width="18"></b>
                </li>
                <li>
                    <a href="/Creative.html">文创</a>
                    <b><img src="./img/trigon.png" width="18"></b>
                </li>
                <li>
                    <a href="/About.html">关于</a>
                    <b><img src="./img/trigon.png" width="18"></b>
                </li>        
            </ul>
        </div>
        <div class="nav_child">

            <div class="child c2">
                <div class="p">
                    <p>
                        <strong> 
                            <a href="/Visit.html#block3">开放时间</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/Visit.html#block4">票务服务</a>
                        </strong>
                    </p>
                    <p>
                        <strong> 
                        <a href="/Visit.html#block5">交通路线</a> 
                        </strong>
                    </p>
                    <p>
                        <strong>
                            <a href="/Visit.html#block6">游览须知</a>
                        </strong>
                    </p>
                    <p class="last">
                        <strong> 
                            <a id="bdclick_btn1" href="#" target="_blank">全景故宫</a> 
                        </strong>
                    </p>
                </div>
            </div>
            
            <div class="child c3">
                <div class="p">
                    <p>
                        <strong>
                            <a href="/shows.html#temporary2">近期展览</a>
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/shows.html#temporary4">专馆</a>
                            </strong>
                    </p>
                    <p>
                        <strong> 
                                <a href="/shows.html#temporary_5">原状陈列</a> 
                        </strong>
                    </p>
                    <p class="last">
                        <strong> 
                            <a href="/shows.html#temporary_6">赴外展览</a> 
                        </strong>
                    </p>
            </div>
            </div>
            
            <div class="child c4">
                <div class="p">
                    <p>
                        <strong> 
                            <a href="/Events.html#hd1-2">教育新闻</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/Events.html#hd1-3">故宫博物院教育中心</a> 
                        </strong>
                    </p>
                    <p>
                        <strong>
                                <a href="/Events.html#hd1-6">国际博协培训中心</a> 
                        </strong>
                        </p>
                        <p class="last">
                            <strong> 
                                <a href="/Events.html#hd1-7">故宫志愿者</a>
                                </strong>
                        </p>
                </div>
            </div>
            
            <div class="child c5">
                <div class="p">
                    <p>
                        <strong> 
                            <a href="/explore/buildings.html">建筑</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/explore/collections.html">藏品</a>
                            </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/explore/ancients.html">古籍</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/explores/courts.html">宫廷历史</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/explore/protects.html">文物医院</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/explore/cultures.html">文化专题</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="http://minghuaji.dpm.org.cn" target="_blank">名画记</a>
                            </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/shuziduobaoge/html.html" target="_blank">数字多宝阁</a>
                        </strong>
                    </p>
                    <p class="last">
                        <strong> 
                            <a href="https://digicol.dpm.org.cn/" target="_blank">数字文物库</a>
                        </strong>
                    </p>
                </div>
            </div>
            
            <div class="child c6">
                <div class="p">
                    <p>
                        <strong> 
                            <a href="/learning/dynamic.html">学术活动</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/expert.html">专家名录</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/achaime/institute.html">故宫研究院</a> 
                        </strong>
                    </p>
                    <p>
                        <strong>
                            <a href="/science/platform.html">故宫学院</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/organization_others.html">其他学术机构</a> 
                        </strong>
                    </p>
                    <p class="last">
                        <strong> 
                            <a href="/journals.html">故宫博物院院刊</a> 
                        </strong>
                    </p>				
                </div>
            </div>
            
            <div class="child c7">
                <div class="p">
                    <p>
                        <strong> 
                            <a href="/publishes.html">故宫出版</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/Creative.html#protects">文创产品</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/lights/royal.html">故宫壁纸</a> 
                        </strong>
                    </p>
                    <p>
                        <strong>
                                <a href="/Creative.html#app">故宫APP</a> 
                        </strong>
                    </p>
                    <p class="last">
                        <strong> 
                            <a href="http://young.dpm.org.cn/damaoxian#gamezone" target="_blank">故宫游戏</a> 
                        </strong>
                    </p>				
                </div>
            </div>
            
            <div class="child c8">
                <div class="p">
                    <p>
                        <strong> 
                            <a href="/about/about_view.html">总说</a> 
                        </strong>
                    </p>
                    <p>
                        <strong>
                            <a href="/about/leader_list.html">领导</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/about/information.html">资讯</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/about/about_chron.html">院史编年</a> 
                        </strong>
                    </p>
                    <p>
                        <strong> 
                            <a href="/about/bill_billboard.html">景仁榜</a> 
                        </strong>
                    </p>
                    <p class="last">
                        <strong> 
                            <a href="/about/organization.html">机构设置</a> 
                        </strong>
                    </p>				
                </div>
            </div>

        </div>
    </div>

    <div class="banner" id="helloweb">
        <!-- <div class="imgBox">
            <p style="width: 100%"><img src="./img/1.jpg" alt="" style="width: 100%"></p>
        </div> -->
        <canvas></canvas>
    </div>

<script>

function getMat(color){
	// our material is a phong material, with no shininess (highlight) and a black specular
			return new THREE.MeshStandardMaterial({
				color:color,
			roughness:.9,
			transparent: true,
			opacity: 0,
			emissive:0x270000,
			shading:THREE.FlatShading
		});
	}
    var Colors = {
      red : 0xf85051,
      orange: 0xea8962,
      yellow: 0xdacf75,
      beige: 0xccc58f,
      grey: 0xbab7a1,
      blue: 0x4379a8,
      ocean: 0x4993a8,
      green: 0x24a99b
    };

    var colorsLength = Object.keys(Colors).length;

    function randomRange(min,max) {
        return Math.floor(Math.random()*(max-min+1)+min);
    }

    function getRandomColor(){
      var colIndx = Math.floor(Math.random()*colorsLength);
      var colorStr = Object.keys(Colors)[colIndx];
      return Colors[colorStr];
    }

    function shiftPosition(pos, radius){
      if(Math.abs(pos) < radius){
        if(pos >= 0){
          return pos + radius;
        } else {
          return pos - radius;
        }
      } else {
        return pos;
      }
    }

    // Default parameters
    var parameters = {
      minRadius : 30,
      maxRadius : 50,
      minSpeed:.015,
      maxSpeed:.025,
      particles:500,
      minSize:.1,
      maxSize:2
    };

    // For a THREEJS project we need at least
    // a scene
    // a renderer
    // a camera
    // a light (1 or many)
    // a mesh (an object to display)

    var scene, renderer, camera, light;
    var stars = [];
    var nbPlanetsMax = 4;
    var planets = [];
    var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight;


    // initialise the world
    function initWorld(){
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(75, WIDTH/HEIGHT, .1, 2000);
      camera.position.z = 100;

      //
      // THE RENDERER
      //
      renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true
      });
      renderer.setSize(WIDTH, HEIGHT);
      renderer.shadowMap.enabled = true;

      container = document.getElementById('helloweb');
      container.appendChild(renderer.domElement);


      // Lights
      ambientLight = new THREE.AmbientLight(0x663344,2);
      scene.add(ambientLight);

      light = new THREE.DirectionalLight(0xffffff, 1.5);
      light.position.set(200,100,200);
      light.castShadow = true;
      light.shadow.camera.left = -400;
      light.shadow.camera.right = 400;
      light.shadow.camera.top = 400;
      light.shadow.camera.bottom = -400;
      light.shadow.camera.near = 1;
      light.shadow.camera.far = 1000;
      light.shadow.mapSize.width = 2048;
      light.shadow.mapSize.height = 2048;

      scene.add(light);


      //
      // HANDLE SCREEN RESIZE
      //
      window.addEventListener('resize', handleWindowResize, false);

      // Creating firts planets
      for(var i = 0; i < nbPlanetsMax; i++){
        planets.push(new Planet(-2000/nbPlanetsMax * i - 500));
      }
      addStarts();
      loop();

  }

  function animateStars(z) {

  // loop through each star
    for(var i=0; i<stars.length; i++) {

      star = stars[i];
      // if the particle is too close move it to the back
      if(star.position.z>z) star.position.z-=2000;

    }

  }

  function addStarts(){

      for ( var z= -2000; z < 0; z+=20 ) {

        var geometry   = new THREE.SphereGeometry(0.5, 32, 32)
        var material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
        var sphere = new THREE.Mesh(geometry, material)

        sphere.position.x = randomRange(-1 * Math.floor(WIDTH/2),Math.floor(WIDTH/2));
        sphere.position.y = randomRange(-1 * Math.floor(HEIGHT/2),Math.floor(HEIGHT/2));

        // Then set the z position to where it is in the loop (distance of camera)
        sphere.position.z = z;

        // scale it up a bit
        sphere.scale.x = sphere.scale.y = 2;

        //add the sphere to the scene
        scene.add( sphere );

        //finally push it to the stars array
        stars.push(sphere);
      }
  }

  var Planet = function(z){
    // the geometry of the planet is a tetrahedron
    this.planetRadius = randomRange(12,30);
    var planetDetail = randomRange(2,3);
    var geomPlanet = new THREE.TetrahedronGeometry(this.planetRadius, planetDetail);

    var noise = randomRange(1,5);
    for(var i=0; i<geomPlanet.vertices.length; i++){
      var v = geomPlanet.vertices[i];
      v.x += -noise/2 + Math.random()*noise;
      v.y += -noise/2 + Math.random()*noise;
      v.z += -noise/2 + Math.random()*noise;
    }

    // create a new material for the planet
    var color = getRandomColor();
    var matPlanet = getMat(color);
    // create the mesh of the planet
    this.planet = new THREE.Mesh(geomPlanet, matPlanet);

    this.ring = new THREE.Mesh();
    this.nParticles = 0;

    // create the particles to populate the ring
    this.updateParticlesCount();

    // Create a global mesh to hold the planet and the ring
    this.mesh = new THREE.Object3D();
    this.mesh.add(this.planet);
    this.mesh.add(this.ring);

    this.planet.castShadow = true;
    this.planet.receiveShadow = true;

    // update the position of the particles => must be moved to the loop
    this.mesh.rotation.x = (Math.random()*2-1) * 2 * Math.PI;
    this.mesh.rotation.z = (Math.random()*2-1) * 2 * Math.PI;

    var posX = randomRange(-1 * Math.floor(WIDTH/4),Math.floor(WIDTH/4));
    var posY = randomRange(-1 * Math.floor(HEIGHT/4),Math.floor(HEIGHT/4));
    posX = shiftPosition(posX, this.planetRadius);
    posY = shiftPosition(posY, this.planetRadius);

    this.mesh.position.set(posX,posY,z);
    scene.add(this.mesh);
  }
  Planet.prototype.destroy = function(){
    scene.remove( this.mesh );
  }
  Planet.prototype.updateParticlesCount = function(){
    var parameters = {
      minRadius : randomRange(this.planetRadius + 10 , 60),
      maxRadius : randomRange(40,70),
      minSpeed: randomRange(0,5)*0.1 + randomRange(0,9) * 0.01,
      maxSpeed: randomRange(0,5)*0.1 + randomRange(0,9) * 0.01,
      particles: randomRange(0,1) * randomRange(20,30),
      minSize: randomRange(1,3) + randomRange(0,9) * 0.1,
      maxSize: randomRange(1,3) + randomRange(0,9) * 0.1
    };

    if (this.nParticles < parameters.particles){
      // Remove particles
      for (var i=this.nParticles; i< parameters.particles; i++){
        var p = new Particle();
        p.mesh.rotation.x = Math.random()*Math.PI;
        p.mesh.rotation.y = Math.random()*Math.PI;
        p.mesh.position.y = -2 + Math.random()*4;
        this.ring.add(p.mesh);
      }
    }else{
      // add particles
      while(this.nParticles > parameters.particles){
        var m = this.ring.children[this.nParticles-1];
        this.ring.remove(m);
        m.userData.po = null;
        this.nParticles--;
      }
    }
    this.nParticles = parameters.particles;

    // We will give a specific angle to each particle
    // to cover the whole ring we need to
    // dispatch them regularly
    this.angleStep = Math.PI*2/this.nParticles;
    this.updateParticlesDefiniton();
  }

  // Update particles definition
  Planet.prototype.updateParticlesDefiniton = function(){

    for(var i=0; i<this.nParticles; i++){
      var m = this.ring.children[i];
      var s = parameters.minSize + Math.random()*(parameters.maxSize - parameters.minSize);
      m.scale.set(s,s,s);

      // set a random distance
      m.userData.distance = parameters.minRadius +  Math.random()*(parameters.maxRadius-parameters.minRadius);

      // give a unique angle to each particle
      m.userData.angle = this.angleStep*i;
      // set a speed proportionally to the distance
      m.userData.angularSpeed = rule3(m.userData.distance,parameters.minRadius,parameters.maxRadius,parameters.minSpeed, parameters.maxSpeed);
    }
  }

  var Particle = function(){
    // Size of the particle, make it random
    var s = 1;

    // geometry of the particle, choose between different shapes
    var geom,
    random = Math.random();

    if (random<.25){
      // Cube
      geom = new THREE.BoxGeometry(s,s,s);

    }else if (random < .5){
      // Pyramid
      geom = new THREE.CylinderGeometry(0,s,s*2, 4, 1);

    }else if (random < .75){
      // potato shape
      geom = new THREE.TetrahedronGeometry(s,2);

    }else{
      // thick plane
      geom = new THREE.BoxGeometry(s/6,s,s); // thick plane
    }
    // color of the particle, make it random and get a material
    var color = getRandomColor();
    var mat = getMat(color);

    // create the mesh of the particle
    this.mesh = new THREE.Mesh(geom, mat);
    this.mesh.receiveShadow = true;
    this.mesh.castShadow = true;
    this.mesh.userData.po = this;
  }


  // Update particles position
  Planet.prototype.updateParticlesRotation = function(){

    // increase the rotation of each particle
    // and update its position

    for(var i=0; i<this.nParticles; i++){
      var m = this.ring.children[i];
      // increase the rotation angle around the planet
      m.userData.angle += m.userData.angularSpeed;

      // calculate the new position
      var posX = Math.cos(m.userData.angle)*m.userData.distance;
      var posZ = Math.sin(m.userData.angle)*m.userData.distance;
      m.position.x = posX;
      m.position.z = posZ;

      //*
      // add a local rotation to the particle
      m.rotation.x += Math.random()*.05;
      m.rotation.y += Math.random()*.05;
      m.rotation.z += Math.random()*.05;
      //*/
    }
  }

  function addPlanet(z){
    planets.push(new Planet(z));
  }

  function loop(){
    var horizon = - 2000 + camera.position.z;
    for(var i = 0; i < planets.length; i++){
      if(planets[i].mesh.position.z > camera.position.z){
        planets[i].destroy();
        planets.splice(i, 1);
      }

      // If the planet is arriving
      if(planets[i].mesh.position.z > horizon && planets[i].planet.material.opacity < 1){
        planets[i].planet.material.opacity += 0.005;
        for(var j=0; j< planets[i].mesh.children[1].children.length; j++){
          planets[i].mesh.children[1].children[j].material.opacity += 0.005;
        }
      }
    }


    // Adding stars
    animateStars(camera.position.z);

    if(planets.length < nbPlanetsMax){
      addPlanet(camera.position.z - 2000);
    }

    for(var i = 0; i < planets.length; i++){
      planets[i].planet.rotation.y-= 0.01;
      planets[i].updateParticlesRotation();
    }

    camera.position.z -= 3;

    //
    // RENDER !
    //
    renderer.render(scene, camera);

    //
    // REQUEST A NEW FRAME
    //
    requestAnimationFrame(loop);
  }

  function handleWindowResize() {
    // Recalculate Width and Height as they had changed
    HEIGHT = window.innerHeight;
    WIDTH = window.innerWidth;

    // Update the renderer and the camera
    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
  }



  initWorld();


  function rule3(v,vmin,vmax,tmin, tmax){
    var nv = Math.max(Math.min(v,vmax), vmin);
    var dv = vmax-vmin;
    var pc = (nv-vmin)/dv;
    var dt = tmax-tmin;
    var tv = tmin + (pc*dt);
    return tv;

  }




</script>

</body>
</html>